<template>
    <el-form ref="formRef" label-width="96px" :model="formData" :rules="formRules" :disabled="pageType == 'look'">
        <el-form-item label="选择公众号" prop="official_account_id" style="margin-bottom: 15px">
            <OfficialAccounts
                :public-data="{ id: formData.official_account_id, pageType }"
                @submit="v => v && (formData.official_account_id = v)" />
        </el-form-item>
        <el-form-item label="用户身份授权" prop="is_auth" class="isauth" style="margin-bottom: 15px">
            <el-switch v-model="formData.is_auth" :active-value="2" :inactive-value="1" />
            <el-popover trigger="hover" placement="right" :width="1026" popper-class="tooltop_add">
                <template #default>
                    <div class="alert">
                        <div style="font-size: 16px; font-weight: 500; color: #33302d; line-height: 16px">
                            用户身份授权
                        </div>
                        <div style="margin-top: 16px">
                            <div style="display: flex; align-items: center">
                                <div style="border: 2px solid #ff6b00; width: 0; height: 14px"></div>
                                <div
                                    style="
                                        font-size: 14px;
                                        font-weight: 500;
                                        color: #33302d;
                                        line-height: 14px;
                                        margin-left: 5px;
                                    ">
                                    开启用户授权后，当参与活动前，弹窗授权获取用户信息，用于匹配系统客户身份，适合需要新老客户身份限制的活动
                                </div>
                            </div>
                            <div style="display: flex; justify-content: space-between">
                                <div
                                    v-for="items in onealertData"
                                    :key="items"
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        width: 25%;
                                        padding: 0 10px;
                                    ">
                                    <img :src="items.urc" style="width: 126px; height: 256px" />
                                    <div style="display: flex">
                                        <span
                                            style="
                                                font-size: 12px;
                                                font-weight: 500;
                                                color: #ff6b00;
                                                line-height: 12px;
                                                padding-right: 6px;
                                            "
                                            >{{ items.code }}</span
                                        ><span>{{ items.title }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div style="margin-top: 16px">
                            <div style="display: flex; align-items: center">
                                <div style="border: 2px solid #ff6b00; width: 0; height: 14px"></div>
                                <div
                                    style="
                                        font-size: 14px;
                                        font-weight: 500;
                                        color: #33302d;
                                        line-height: 14px;
                                        margin-left: 5px;
                                    ">
                                    关闭用户授权后，用户以匿名身份签到，适合没有新老用户身份限制的签到活动。
                                </div>
                            </div>
                            <div style="display: flex; justify-content: space-between">
                                <div
                                    v-for="items in twoalertData"
                                    :key="items"
                                    style="
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        padding: 0 10px;
                                        width: 25%;
                                    ">
                                    <img :src="items.urc" style="width: 126px; height: 256px" />
                                    <div style="display: flex; align-items: center">
                                        <span
                                            style="
                                                font-size: 12px;
                                                font-weight: 500;
                                                color: #ff6b00;
                                                line-height: 12px;
                                                padding-right: 6px;
                                            "
                                            >{{ items.code }}</span
                                        ><span>{{ items.title }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
                <template #reference>
                    <img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" />
                </template>
            </el-popover>
        </el-form-item>
        <el-form-item label="活动标题" prop="activity_name" style="margin-bottom: 24px">
            <el-input
                v-model="formData.activity_name"
                placeholder="请输入标题名称"
                maxlength="15"
                show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="活动分组" prop="group_id" style="margin-bottom: 11px">
            <el-cascader
                ref="cascaderRef"
                v-model="formData.group_id"
                style="width: 100%"
                :props="defaultProps"
                :options="groupOptions"
                @change="orgChange" />
        </el-form-item>
        <el-form-item label="活动有效期" style="margin-bottom: 6px">
            <el-radio-group v-model="formData.period_type">
                <el-radio :label="1">永久</el-radio>
                <el-radio :label="2">固定期限</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item v-if="formData.period_type == 2" prop="effect_time" style="margin-bottom: 24px">
            <el-date-picker
                v-model="formData.effect_time"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
                range-separator="~"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                :default-time="defaultTime()"
                :disabled-date="time => time.getTime() < Date.now() - 8.64e7">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="活动说明">
            <el-input
                v-model="formData.explain"
                placeholder="请输入活动说明"
                maxlength="150"
                show-word-limit
                :rows="6"
                type="textarea" />
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts">
import OfficialAccounts from '@/components/OfficialAccounts.vue';
import { ref, defineExpose, defineProps, onMounted } from 'vue';
import { Picture as IconPicture } from '@element-plus/icons-vue';
import { getGroupList } from '@/api/concreation';

import { ElMessage } from 'element-plus';
import { DFormat, defaultTime } from '@/utils/utils';
import one from '@/assets/smartMarketing/one.png';
import two from '@/assets/smartMarketing/two.png';
import three from '@/assets/smartMarketing/three.png';
import four from '@/assets/smartMarketing/four.png';
import five from '@/assets/smartMarketing/five.png';
interface Props {
    pageType: any;
    group_id: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: '',
    group_id: 0
});
const emit = defineEmits(['submit']);
const onealertData = ref([
    { urc: four, title: '用户参与活动前直接身份授权', code: '①' },
    {
        urc: one,
        title: '用户点击“允许”后，可获取unionid匹配客户信息，以客户身份参与将活动；点击“拒绝”后，匿名参与活动',
        code: '②'
    },
    { urc: two, title: '客户参与签到', code: '③' },
    { urc: three, title: '客户查看奖品，领取奖品', code: '④' },
    { urc: five, title: '扫码添加企微联系人，领取奖品', code: '⑤' }
]);
const twoalertData = ref([
    { urc: one, title: '用户匿名参与活动', code: '①' },
    { urc: two, title: '匿名参与签到', code: '②' },
    { urc: three, title: '匿名查看奖品，领取奖品', code: '③' },
    { urc: four, title: '领取奖品前，授权用户信息，点击“允许”弹出企微二维码，点击“拒绝”，不可领取', code: '④' },
    { urc: five, title: '扫码添加企微联系人，领取奖品', code: '⑤' }
]);
const formRef: any = ref(null);
const cascaderRef: any = ref(null); // 选择分组ref

const formData = ref({
    official_account_id: '', //公众号授权的ID
    activity_name: '', //活动名称
    group_id: props.group_id == 'all' ? 0 : props.group_id, //分组ID //分组id
    is_auth: 1, //1关 2 开
    period_type: 1, //活动有效期类型: 1-永久 2-固定期限
    end_date: '', //开始时间
    begin_date: '', //开始时间
    explain: '', //活动说明
    effect_time: []
});
const formRules = {
    official_account_id: [{ required: true, message: '请选择公众号', trigger: 'change' }],
    activity_name: [{ required: true, message: '请输入活动标题', trigger: 'blur' }],
    group_id: [{ required: true, message: '请选择活动分组', trigger: 'change' }],
    period_type: [{ required: true, message: '请选择活动有效期类型', trigger: 'change' }],
    effect_time: [{ required: true, message: '请选择时间', trigger: 'change' }],
    explain: [{ required: true, message: '请输入活动说明', trigger: 'blur' }]
};
const groupOptions = ref([]);
const defaultProps = {
    checkStrictly: true, // 是否严格的遵守父子节点不互相关联
    emitPath: false,
    multiple: false,
    label: 'name',
    value: 'id'
};
getGroupList({ type: 18, name: '' }).then((res: any) => {
    groupOptions.value = res.data;
});
// 选择完地区后立即关闭
const orgChange = () => {
    cascaderRef.value.togglePopperVisible();
};
const onSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            formData.value.begin_date = formData.value.effect_time[0];
            formData.value.end_date = formData.value.effect_time[1];
            emit('submit');
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
defineExpose({
    formData,
    onSubmit
});
</script>

<style lang="scss" scoped>
.isauth {
    :deep .el-form-item__content {
        display: flex;
        align-items: center;
    }

    .help_icon {
        margin-left: 12px;
        width: 16px;
    }

    .second_icon {
        margin-right: 12px;
        width: 16px;
    }
}

.official_box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;
    height: 150px;
    border: 1px solid #eaeaea;
    border-radius: 1px;
    cursor: pointer;
    color: #ccc;
    font-size: 45px;

    .official_text {
        font-size: 14px;
        color: #000000d1;
    }
}

.official_box2 {
    display: flex;
    cursor: pointer;

    &:hover {
        background: #f5f5f5;
    }

    .left {
        margin-right: 10px;

        .el-icon {
            font-size: 60px;
        }
    }

    .right {
        color: #ff5b11;
        text-align-last: left;

        .right_h3 {
            font-weight: 700;
        }
    }
}

.m_b {
    margin-bottom: 24px;
}

.el-form-item {
    margin-bottom: 0;
}
</style>
